import React, { useRef, useState } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import RoleSetForm from './components/SetForm';
const PlanList = (props) => {
  const { loading, dispatch, list } = props;
  const childRef = useRef();
  const [visible, setVisible] = useState(false);

  // 搜索参数
  const searchItems = [
    {
      label: '状态',
      name: 'status',
      type: 'select',
      select: {
        0: '禁用',
        1: '启用',
      },
    },
  ];

  // table 表头
  const getColumns = [
    {
      title: '计划名称',
      dataIndex: 'planName',
    },
    {
      title: '计划描述 ',

      dataIndex: 'planDesc',
    },
    {
      title: '计划状态',
      type: 'switch',
      dataIndex: 'status',
      render: (val, row) => {
        const { id } = row;
        return {
          auth: true,
          checked: val === '1',
          onClick: () =>
            dispatch({
              type:
                val === '0'
                  ? 'institution/fakeEnablePlan'
                  : 'institution/fakeDisablePlan',
              payload: {
                id,
              },
              callback: () => {
                handleCallback();
              },
            }),
        };
      },
    },

    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          auth: true,
          type: 'edit',
          click: () => handleSaveRole(record),
        },
      ],
    },
  ];
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const handleSaveRole = (detail = {}) => {
    setVisible({
      show: true,
      detail,
    });
  };
  const extraBtn = [
    {
      text: '新增',
      onClick: () => {
        handleSaveRole();
      },
    },
  ];

  return (
    <>
      <TableDataBlock
        cardProps={{ title: '计划' }}
        btnExtra={extraBtn}
        cRef={childRef}
        loading={loading}
        searchItems={searchItems}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="institution/fetchListPlan"
        {...list}
      ></TableDataBlock>
      <RoleSetForm
        childRef={childRef}
        visible={visible}
        onClose={() => setVisible(false)}
        handleCallback={handleCallback}
      ></RoleSetForm>
    </>
  );
};

export default connect(({ institution, loading }) => ({
  list: institution.list,
  loading: loading.models.institution,
}))(PlanList);
